﻿@namespace MudBlazor.Docs.Examples

<MudChipSet @bind-SelectedValues="_selected" SelectionMode="SelectionMode.MultiSelection">
    @for (int i = 0; i < _included.Length; i++) 
    {
        var index = i;
        <MudChip Value="@_ingredients[index]" @bind-Selected="_included[index]" Color="Color.Primary" Variant="@Variant.Text" />
    }
</MudChipSet>

<div class="d-flex flex-column align-center">
    <div class="selection">
        @if (_selected is { Count: > 0 }) 
        {
            <MudText><b>@string.Join(", ", _selected.OrderBy(x => x))</b></MudText>
        }
        else 
        {
            <MudText>Add ingredients to your cocktail.</MudText>
        }
    </div>
    <div class="d-flex">
        @for (int i = 0; i < _included.Length; i++) 
        {
            var index = i;
            <MudCheckBox Color="Color.Secondary" @bind-Value="_included[index]">@_ingredients[index]</MudCheckBox>
        }
    </div>
</div>

@code
{
    private readonly string[] _ingredients = ["Vodka", "Tomato Juice", "Olive", "Peppermint", "Vermouth", "Coconut Milk", "Port Wine"];
    private readonly bool[] _included = new bool[7];
    private IReadOnlyCollection<string>? _selected;
}

